<template>
  <el-descriptions
      class="margin-top"
      title="代码生成器配置"
      :column="2"
      size="large"
      border
  >
    <template #extra>
      <el-button type="primary" @click="dialogVisible = true">修改</el-button>
    </template>
    <el-descriptions-item width="250px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          作者
        </div>
      </template>
      {{ generator.author }}
    </el-descriptions-item>
    <el-descriptions-item width="250px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          表名前缀
        </div>
      </template>
      {{ generator.tablePrefix }}
    </el-descriptions-item>
    <el-descriptions-item width="250px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          子模块名
        </div>
      </template>
      {{ generator.modelName }}
    </el-descriptions-item>
    <el-descriptions-item width="250px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          主键类型
        </div>
      </template>
      <el-tag size="large">{{ generator.idType }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item width="250px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Folder />
          </el-icon>
          后端生成路径
        </div>
      </template>
      {{generator.url}}
    </el-descriptions-item>
  </el-descriptions>

  <el-dialog v-model="dialogVisible" title="修改配置" width="30%" draggable top="11vh">
    <el-form
        label-position="top"
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 450px"
    >
      <el-form-item label="作者">
        <el-input v-model="generator.author" />
      </el-form-item>
      <el-form-item label="代码前缀">
        <el-input v-model="generator.tablePrefix" />
      </el-form-item>
      <el-form-item label="子模块名">
        <el-input v-model="generator.modelName" />
      </el-form-item>
      <el-form-item label="主键类型" prop="region">
        <el-select v-model="generator.idType" placeholder="Activity zone">
          <el-option label="雪花算法" value="雪花算法" />
          <el-option label="ID自增" value="ID自增" />
          <el-option label="UUID" value="UUID" />
          <el-option label="idWorker" value="idWorker" />
        </el-select>
      </el-form-item>
      <el-form-item label="后端生成路径">
        <el-input v-model="generator.url" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="generate">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {computed, nextTick, onMounted,
  reactive, ref} from 'vue'
import {Iphone, Location, Folder, Tickets, User,
} from '@element-plus/icons-vue'
import {GetSettings,Change} from '../service/api'
import {useRouter} from "vue-router";
import { ElMessage } from 'element-plus'

const router = useRouter()
interface Setting {
  url: string,
  modelName:String,
  tablePrefix:String,
  author:String,
  idType:String
}
const size = ref('')
const generator = reactive({
  url: "",
  modelName:"",
  tablePrefix:"",
  author:"",
  idType:""
})
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
onMounted(()=>{
  getSet();
})

const getSet = function () {
  GetSettings().then(res=>{
    generator.url = res.data.data.url;
    generator.author = res.data.data.author
    generator.idType = res.data.data.idType;
    generator.tablePrefix = res.data.data.tablePrefix;
    generator.modelName = res.data.data.modelName;
  }).catch(err=>{
    console.log(err)
  })
}

const generate = function (){
  dialogVisible.value = false;
  Change(generator).then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })
  ElMessage.success("修改成功")
}

const dialogVisible = ref(false)

const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})

const quxiao = ()=>{
  dialogVisible.value = false;
  router.go(0);
  ElMessage.info("取消修改")
}
const isRouter = ref(true)
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.ze{
  height: 100vh;
}
</style>
